<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('任务ECharts')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>项目进度饼状图</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        var myChart = echarts.init(document.getElementById('echarts-pie-chart'));

        $.get('/stats/project/getProjectCompletion').done(function (data){
            var option = {
                title : {
                    text: '各项目进度占总数比例',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:data.legend
                },
                calculable : true,
                series : [
                    {
                        name:'项目进度',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:data.datas
                    }
                ]
            };
            myChart.setOption(option);
            window.onresize = myChart.resize;
        });
    })
</script>
</body>
</html>